<template>
	<div>
		<label-list :tableData="tableData" @add="add" @del="del" @set="set" />
<div><el-dialog v-if="dialogVisible" title="添加标签" :visible.sync="dialogVisible" width="40%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标签名称" prop="label_name">
					<el-input v-model="ruleForm.label_name"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="order">
					<el-input-number v-model="ruleForm.order" controls-position="right" :min="0" :max="10"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</div>
		</el-dialog></div>
		<!-- 修改 -->
		<div>
<el-dialog :visible="labelShow">
	<el-form :model="modifyForm" :rules="morules" ref="modifyForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标签名称" prop="label_name">
					<el-input v-model="modifyForm.label_name"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="order">
					<el-input-number v-model="modifyForm.order" controls-position="right" :min="0" :max="10"></el-input-number>
				</el-form-item>
			</el-form>
			
				<el-button @click="cencel">取 消</el-button>
				<el-button type="primary" @click="btn">确 定</el-button>
</el-dialog>

		</div>
		
	</div>
</template>

<script>
import { addlabel, Getlabel, deletlabel ,putlabel} from '@/api/towntalk';
export default {
	name: 'towntalk_label_list',
	data() {
		return {
			tableData: [],
			dialogVisible: false,
			ruleForm: {
				label_name: '',
				order: 0,
				
			},
			id: '',
			
			rules: {
				label_name: [{ required: true, message: '请输入标签', trigger: 'blur' }],
				order: [{ required: true, message: '请输入排序', trigger: 'change' }],
			},
			modifyForm:{
				label__name:'',
				order:0,
				
			},
			morules: {
				label_name: [{ required: true, message: '请输入标签', trigger: 'blur' }],
				order: [{ required: true, message: '请输入排序', trigger: 'change' }],
			},
			labelShow:false
		};
	},
	components: {},
	created() {
		this.tianjia();
	},
	activated() {
		this.tianjia();
	},
	mounted() {},
	methods: {
		add() {
			this.dialogVisible = true;
		},
		resetForm() {
			this.dialogVisible = false;
		},
		async submitForm() {
			await addlabel(this.ruleForm);
			this.tianjia();
			this.dialogVisible = false;
		},
		async tianjia() {
			const data = await Getlabel();
			this.tableData = data;
		},
		async del(id) {
			try {
				await deletlabel(id);
                this.$message.success('删除成功');
				this.tianjia();
			} catch (err) {
				console.log(err.message);
			}
		},
		async set(id) {
			this.labelShow=true
			const res= await Getlabel({id})
			this.id = id
			this.modifyForm=res[0]
		},
		async btn(){	
			await putlabel({...this.modifyForm, id: this.id})
			this.tianjia();
			this.labelShow=false
		},
		cencel(){
			this.labelShow=false
		}
	},
	computed: {},
	watch: {},
};
</script>

<style scoped></style>
